<template>
  <s-layout>
  <view class="page-container">
    <!-- 轮播图 -->
    <swiper class="swiper-container" autoplay circular indicator-dots>
      <swiper-item v-for="(image, index) in formData.detailData.carouselImages" :key="index">
        <image :src="image" mode="aspectFill" class="carousel-image"></image>
      </swiper-item>
    </swiper>
    <view class="check-box">
      <view class="check-box-border">
        <view class="header-box">
          <!-- <view class="header-box-shang"> -->
          <text class="title">{{formData.detailData.firminformation.name}}</text>
          <!-- <view>
              <view
                class="list-item-right-tag-box2"
                style="margin-top: 3rpx; margin-right: 3rpx"
              >
                <view class="list-item-right-tag-box-text2 center">
                  <view>王志浩</view>
                </view>
              </view>
            </view> -->
          <!-- </view> -->
          <view class="header-box-xia">
            <view class="header-box-xia-txt2-border">
              <view>
                <view class="list-item-right-tag-box2">
                  <view class="list-item-right-tag-box-text2 center">
                    <view>法人：{{formData.detailData.firminformation.legalperson}}</view>
                  </view>
                </view>
              </view>

              <view>
                <view class="list-item-right-tag-box3">
                  <view class="list-item-right-tag-box-text3 center">
                    <view>2024.10.23</view>
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="list-item-right-tag-box3-address">
                <view class="list-item-right-tag-box-text3-address center">
                  <view style="display: flex">
                    <fui-icon name="location" :size="30" color="#666"></fui-icon>
                    <view>{{formData.detailData.firminformation.address}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="check-box">
      <view class="check-box-border">
        <view class="check-title"> 检查内容 </view>
        <view>
          <view class="list-item-right-tag-box2" style="margin-left: 10rpx; margin-top: 20rpx;">
            <view class="list-item-right-tag-box-text2 center">
              <view>负责人：{{ formData.detailData.firminformation.responsiblePerson }}</view>
            </view>
          </view>
        </view>
        <view class="check-content">
          <view class="check-item" v-html="formData.detailData.checkContent"></view>
        </view>
      </view>
    </view>
    <view class="check-box">
      <view class="check-box-border">
        <view class="check-title"> 检查视频 </view>
        <view class="check-content">
          <!-- 视频播放模块 -->
          <view class="video-section">
            <su-video :src="formData.detailData.videoUrl" :poster="formData.detailData.cover" :height="400" />
          </view>
        </view>
      </view>
    </view>


    <view class="situation-box">
      <view class="situation-border">
        <view class="situation-title">检查情况</view>
        <view class="situation-content">
          <view class="situation-content-txt" v-if="formData.detailData.checkSituation === 0">无隐患</view>
          <view class="situation-content-txt" v-else-if="formData.detailData.checkSituation === 1">存在隐患</view>
          <view class="situation-content-txt" v-else-if="formData.detailData.checkSituation === 2">风险较大</view>

          <!-- <image class="situation-img" :src="getSituationImage(formData.detailData.checkSituation)"
            mode="scaleToFill" />
          <image class="situation-img" src="@/static/tabs/风险较大.png" mode="scaleToFill" /> -->
        </view>
      </view>
    </view>

    <view class="modify-box" v-if="formData.detailData.checkSituation === 1 ||formData.detailData.checkSituation === 2">
      <view class="modify-border">
        <view class="situation-title">整改记录</view>
        <view class="modify-content">
          <view v-for="(item, index) in formData.detailData.rectificationRecords" :key="index"
            style="margin-bottom: 10px">
            <view class="imut_map_box_message_title">{{ item.title }}</view>
            <view class="imut_map_box_message_tag" style="display: flex">
              <view class="imut_map_box_message_tag_type">{{ item.responsiblePerson }}</view>
              <view style="display: flex">
                <view class="imut_map_box_message_tags">{{ item.location }}</view>
              </view>
            </view>

            <view class="imut_map_box_message_time_view flex">
              <view class="blue-txt">{{ item.rectificationType }}</view>
              <view class="imut_map_box_message_time">发布时间：{{ item.releaseDate }}</view>
            </view>

            <view class="imut_map_box_message_detail">{{ item.description }}</view>

            <view class="imut_map_box_message_image flex">
              <image v-for="(image, imgIndex) in item.images" :key="imgIndex" class="imut_map_box_message_image_item"
                :src="image" mode="aspectFill" />
            </view>

            <view class="line"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</s-layout>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
const formData = ref({
  detailData:{
    checkContent: `
      火灾报警控制器
      <br>
      外观检查
      <br>
      检查火灾报警控制器表面是否有明显的划痕、变形、损坏等情况，确保外壳完好无损。
      <br>
      查看控制器的标识是否清晰，包括设备名称、型号、参数等信息，标识应完整且易于辨认。
      <br>
      安装检查
      <br>
      检查控制器的安装是否牢固，无松动、倾斜现象，安装位置应符合设计要求，便于操作和维护。
      <br>
      检查控制器的接地是否良好，接地电阻应符合相关标准规定。
    `,
    videoUrl: "https://example.com/training.mp4",
    cover: "https://example.com/cover.jpg",
    checkSituation: 2,
    carouselImages: [
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.-q5p5iHNq78zmMg5jUPQbQHaE5?w=244&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.bE7iPBf_9g7RNifjPFIM2AAAAA?w=288&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    ],    
    companyName: "上海国士堂科技有限公司",
    location: "B栋3层配电房",
    rectificationRecords: [
    {
      title: "火灾自动报警系统整改",
      responsiblePerson: "王丹",
      phone: "13847111154",
      rectificationType: "二次整改",
      releaseDate: "2024.10.23",
      description: "外观检查、安全检查，接地电阻符合相关接地标准",
      images: [
        "https://pic.nximg.cn/file/20200417/30308043_121945090242_2.jpg",
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.lF54Ixn38DUVk6rEUT2migHaHa?w=180&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.EbLi--DT3Maallhbh6qJJAHaE8?w=260&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      ],
    }
    ],
    firminformation:
      {
        name:"内蒙古润创冷链物流有限责任公司",
        address:"内蒙古呼和浩特市新城区金象国际物流园A座",
        phone:"15826953126",
        legalperson:"秦志强" ,
        responsiblePerson:"王丹"
      }
    
  }
});


// // 根据检查情况返回对应的图片路径
// const getSituationImage = (situation: number) => {
//   switch (situation) {
//     case 0:
//       return "/static/tabs/自动灭火系统.jpg";
//     case 1:
//       return "/static/tabs/存在隐患.png";
//     case 2:
//       return "/static/tabs/风险较大.png";
//     default:
//       return "/static/tabs/无隐患.png";
//   }
// };
</script>

<style lang="scss">

page {
  background-color: #f0f3f8;
  height: 100%;
}

.list-item-right-tag-box2 {
  background-color: #dee6f7;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 3rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text2 {
  height: 30rpx;
  font-size: 20rpx;
  font-weight: 550;
  color: #0038b1;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-container {
  width: 96%;
  margin: auto;
}
.swiper-container {
  width: 100%;
  height: 380rpx;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  display: block; /* 确保图片以块级元素显示 */
}

.check-box {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 5px;
}
.check-box-border {
  width: 94%;
  margin: auto;
  padding: 20rpx 0;
}
.header-box {
  .title {

    font-size: 44rpx;
    font-weight: 700;
    color: #1a1a1a;
    max-width: 70%;
  }
  .header-box-shang {
    display: flex;
    justify-content: space-between;
  }
  
  .list-item-right-tag-box {
    background-color: #f7ebde;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
    margin-left: 10rpx;
  }

  .list-item-right-tag-box-text {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #ff6633;
  }
  .list-item-right-tag-box2 {
    background-color: #dee6f7;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
  }

  .list-item-right-tag-box-text2 {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #0038b1;
  }
  
  .list-item-right-tag-box3 {
    background-color: #ebeaea;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
    margin-left: 10rpx;
  }

  .list-item-right-tag-box-text3 {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #666;
  }
  .list-item-right-tag-box3-address {
    margin-top: 15rpx;
    background-color: #ebeaea;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 10rpx 15rpx;
    border-radius: 8px;

  }

  .list-item-right-tag-box-text3-address {
    height: 30rpx;
    font-size: 23rpx;
    font-weight: 500;
    color: #666;
  }
  .header-box-xia {
    margin-left: 10rpx;
    margin-top: 3rpx;
  }
  .header-box-xia-txt1 {
    color: #666;
    font-size: 22;
  }
  .header-box-xia-txt2-border {
    display: flex;
    margin-top: 10rpx;
  }
  .status-tag {
    padding: 16rpx 32rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #fff;
    @include flex(row, center, center);
    gap: 10rpx;
  }
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/rrtM1LP5iUzZ.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/o0Q3cO7cUfPA.woff")
      format("woff");
  font-display: swap;
}
.check-title {
  border-left: 0.25rem solid rgb(41, 121, 255);   
  padding-left: 10rpx;
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  font-size: 32rpx;
}
.check-content {
  margin-top: 15rpx;
}
.check-item {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6; /* 行高 */
  /* text-indent: 2em;  首行缩进两字符 */
}
.situation-box {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 5px;
}
.situation-border {
  width: 94%;
  margin: auto;
  padding: 20rpx 0;
}
.situation-title {
  border-left: 0.25rem solid rgb(41, 121, 255);   
  padding-left: 10rpx;
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  font-size: 32rpx;
}
.situation-img {
  width: 150rpx;
  height: 150rpx;
}
.situation-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.situation-content-txt {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}
.modify-box {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 5px;
  margin: 10px auto;
  box-shadow: 1px 1px 10px #e0e0e0;
}
.modify-border {
  width: 94%;
  margin: auto;
  padding: 20rpx 0;
}
.modify-content {
  width: 92%;
  margin: 0 auto;
  padding: 15px 0;
  z-index: 9999;
}
.modify-content-pic {
  width: 50%;
  height: 300rpx;
  margin: auto;
}
.imut_map_box_message_title {
  color: #333333;
  font-weight: 600;
  font-size: 14px;
}
.imut_map_box_message_tag {
  margin: 10px 0;
  font-weight: 600;
}
.imut_map_box_message_time_view {
  font-size: 11px;
  color: rgb(139, 139, 139);
}
.flex {
  display: flex;
  justify-content: space-between;
}
.imut_map_box_message_detail {
  font-weight: 500;
  color: #333333;
  font-size: 13px;
  margin: 10px 0;
}
.line {
  display: block;
  height: 0.3px;
  width: 100%;
  background-color: rgb(222, 222, 222);
  margin: 13px 0;
}
.imut_map_box_message_tag_type {
  background-color: #3772ff;
  padding: 2px 5px;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 2px;
  margin-right: 8px;
  border-radius: 5px;
}
.imut_map_box_message_tags {
  color: rgb(83, 83, 83);
  background-color: rgb(232, 232, 232);
  padding: 2px 5px;
  font-size: 11px;
  letter-spacing: 2px;
  margin-right: 8px;
  border-radius: 5px;
}
.imut_map_box_message_image_item {
  width: 200rpx;
  height: 200rpx;
  border-radius: 5px;
}
.blue-txt {
  color: #0038b1;
}
.video-section {
  position: relative;
  background: #000;
  width: 90%;
  margin: 20rpx auto;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background: linear-gradient(transparent, #ecf5ff);
  }
}
</style>
